<% if User.with_role(:creator).any? %>
  <style>
    <%= Rails.application.assets["setup-mode.css"].to_s.html_safe %>
  </style>

  <main id="main-content" class="flex flex-1 justify-center flex-col crayons-layout crayons-layout--limited-xs" data-controller="creator-settings">
    <div aria-live="assertive">
      <% if flash[:error] %>
        <div class="crayons-notice crayons-notice--danger mb-6" role="alert">
          <% flash[:error].each do |message| %>
            <div><%= message %></div>
          <% end %>
        </div>
      <% end %>
    </div>

    <%= form_with url: admin_creator_settings_path, model: @creator_settings_form, local: true, method: "post", multipart: true, class: "relative z-elevate p-4", "data-action": "submit->creator-settings#formValidations" do |f| %>

      <div class="align-center">
        <p class="fs-3xl fw-bold">Lovely! Let's set up your Forem.</p>
        <p class="color-base-70 fs-xl">No stress, you can always change it later.</p>
      </div>
      <br>
      <%= render "form", creator_settings_form: @creator_settings_form, f: f %>
      <div id="finish-button" class="crayons-field mt-6 align-left">
        <%= f.submit "Finish", class: "crayons-btn btn--primary" %>
      </div>
      <% if @help_url %>
        <%= render "shared/help_icon" %>
      <% end %>
    <% end %>

    <%= inline_svg_tag("forem-background.svg", aria_hidden: true, class: "forem-background fixed bottom-0 right-0 hidden m:block") %>
  </main>

<% end %>
